<template>
  <div class="divbox">
    <div class="header">
      <el-tabPane
        :headerList="headers"
        :productList="productList"
        :productList1="productList1"
        :productList2="productList2"
        :productList3="productList3"
        :productList4="productList4"
      >
      </el-tabPane>
    </div>
  </div>
</template>

<script>
// 引入头部标签页组件
const tabPane = () => import("@/components/store/index/Tabpane.vue");
// 引入table组件
const Tab = () => import("@/components/store/index/Table.vue");
// ------------------------------------------
// 引入axios请求
import { getHeaders, product_list } from "@/network/api/store/index";
//---------------------------------------------
// 内容组件
const content = () => import("@/components/store/index/content.vue");
export default {
  // 组件注册
  components: {
    "el-tabPane": tabPane,
    "el-content": content,
    "el-table": Tab,
  },
  // 页面初始化生命周期
  async created() {
    // 获取头部导航条数据
    let headers = await getHeaders();

    this.headers = headers.data.data;

    // 获取商品列表

    const allPromise = Promise.all([
      product_list(1, 20, 1),
      product_list(1, 20, 2),
      product_list(1, 20, 3),
      product_list(1, 20, 4),
      product_list(1, 20, 5),
    ]);
    // 定义变量
    let productList0, productList1, productList2, productList3, productList4;
    let values = await allPromise;
    values.forEach((item) => {
      item.data.data.list.forEach((ite) => {
        let timestamp = ite.addTime;

        let newDate = new Date();

        newDate.setTime(timestamp * 1000);
        ite.addTime = newDate.toLocaleDateString();
      });
    });
    productList0 = values[0].data.data.list;
    productList1 = values[1].data.data.list;
    productList2 = values[2].data.data.list;
    productList3 = values[3].data.data.list;
    productList4 = values[4].data.data.list;
    // console.log("productList0", productList0);

    this.productList = productList0;
    this.productList1 = productList1;
    this.productList2 = productList2;
    this.productList3 = productList3;
    this.productList4 = productList4;
  },
  data() {
    return {
      headers: [], //头部导航条数据
      productList: [], //商品列表1
      productList1: [], //商品列表2
      productList2: [], //商品列表3
      productList3: [], //商品列表4
      productList4: [], //商品列表5
    };
  },
};
</script>

<style scoped lang="scss">
.divbox {
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  .header {
    padding: 20px;
    // border-bottom: 1px solid #e6ebf5;
  }
}
</style>
